<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        .container {
            margin: 0 auto;
            border: 1px solid #999;
            padding: 20px;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            width: 300px;
            text-align: center;
            align-items: center;
        }

        .input-style {
            margin: 8px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #999;
            width: 100px;
        }

        .btn {
            height: 32px;
            width: 100px;
            border: none;
            background: #10aeff;
            color: #fff;
            font-weight: bold;
        }

        .chat {
            position: relative;
            margin: 20px auto;
            width: 320px;
            height: 700px;
            border: 1px solid #999;
            border-radius: 20px;
            display: none;
            box-sizing: border-box;
            background: #eee;
        }

        .content {
            height: 600px;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .key-border {
            position: absolute;
            bottom: 0;
            /* width: 100%; */
            display: flex;
            flex-direction: row;
            padding: 10px;
            border-top: 1px solid;
        }

        .key-border-input {
            width: 206px;
        }


        .msg {
            /*width: 270px;*/
            /*border-radius: 12px;*/
        }

        .sender {
            margin-left: 5px;
            color: #777;
            font-size: 12px;
            background: #fff;
            width: 40px;
            height: 24px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .sender-msg {
            background: #fff;
            width: 240px;
            border-radius: 10px;
            left: 15px;
            top: 36px;
            margin-top: -2px;
            margin-left: 12px;
        }

        .receiver {
            margin-left: 272px;
            color: #777;
            font-size: 12px;
            background: #fff;
            width: 40px;
            height: 24px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .receiver-msg {
            background: #fff;
            width: 240px;
            border-radius: 10px;
            left: 15px;
            top: 36px;
            margin-top: -2px;
            margin-left: 65px;
        }
    </style>
</head>

<body>
<div class="container" id="login">
    <div style="color: #777;font-size: 12px;margin-left: 8px;">选择人员测试：</div>
    <select id="user" class="input-style">
        <option value="1">1-张三</option>
        <option value="2">2-李四</option>
    </select>
    <input type="submit" class="input-style btn" value="确定" onclick="confirm()">
</div>
<div class="chat" id="chat">
    <div id="name" style="text-align: center;margin: 4px 0;border-bottom: 1px solid #999;">张三</div>
    <div class="content" id="content">
    </div>
    <div class="key-border">
        <textarea class="key-border-input" id="input-msg"></textarea>
        <button class="btn input-style" style="width: 70px" onclick="sendMsg()">发送</button>
    </div>
</div>
</body>

<script type="text/javascript">
    let sender = null;
    let receiver = null;

    window.CHAT = {
        socket: null,

        init: _ => {
            //判断浏览器是否支持webSocket
            if (window.WebSocket) {
                //创建websocket对象
                // CHAT.socket = new WebSocket("ws://192.168.1.5:8080/ws");
                CHAT.socket = new WebSocket("ws://localhost:8288/ws");

                CHAT.socket.onopen = _ => {
                    console.log("连接建立成功");
                    // 发送用户信息
                    let userId = document.getElementById("user").value;
                    CHAT.send({userId: userId})
                },
                    CHAT.socket.close = _ => {
                        console.log("连接关闭");
                    },
                    CHAT.socket.onerror = _ => {
                        console.log("发生异常");
                    },
                    window.onload;
                CHAT.socket.onmessage = e => {
                    let data = JSON.parse(e.data);
                    console.log("接收消息:",data);
                    const msg = `<div class="msg"><div class="receiver">${receiver.name}</div><p class="receiver-msg">${data.content}</p></div>`
                    const receiveMsg = document.getElementById("content");
                    const html = receiveMsg.innerHTML; //获取本对象原有内容
                    //嵌入新的内容s
                    receiveMsg.innerHTML = html + msg;
                }
            } else {
                alert("您的浏览器不支持websocket协议")
            }
        },
        send: msg => {
            const sendMsg = JSON.stringify(msg);
            if (CHAT.socket.readyState === WebSocket.OPEN) {
                CHAT.socket.send(sendMsg);
                console.log('发送的消息：' + sendMsg)
            }
        }
    };
    // CHAT.init();

    let sendMsg = function () {
        let message = document.getElementById('input-msg').value;
        if (!message) return;
        const msg = {
            sendUserId: sender.userId,
            receiveUserId: receiver.userId,
            message: message,
        };
        CHAT.send(msg);
        const content = `<div class="msg"><div class="sender">${sender.name}</div><p class="sender-msg">${msg.message}</p></div>`
        const receiveMsg = document.getElementById("content");
        let html = receiveMsg.innerHTML; //获取本对象原有内容
        if (!html) {
            html = '';
        }
        //嵌入新的内容s
        receiveMsg.innerHTML = html + content;
        document.getElementById('input-msg').value = '';
    };

    /**
     * 选择用户确定
     */
    let confirm = function () {
        CHAT.init();
        let value = document.getElementById('user').value;
        if (value == 1) {
            receiver = {userId: 2, name: '李四'};
            sender = {userId: 1, name: '张三'};
        } else {
            receiver = {userId: 1, name: '张三'};
            sender = {userId: 2, name: '李四'};
        }
        CHAT.send({userId: value,receiveUserId: receiver.userId});

        document.getElementById("login").style.display = 'none';
        document.getElementById("chat").style.display = 'block';
        document.getElementById('name').innerText = sender.name;
    }
</script>


</html>
